<template>
  <div class="Banner">
    <van-swipe
      :autoplay="3000"
      style="width: 46%; height: 220px; border-radius: 10px"
    >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" style="width: 100%; height: 100%" />
      </van-swipe-item>
    </van-swipe>
    <div class="Bannerone">
      <div class="Bannertop">
        <span>限时秒杀</span>
        <div class="Bannertopone">
          <img
            src="https://pic.cdfgsanya.com/assets/upload/product/bd24acc2be52228edba5a5408bb2df6b_400x400.jpg"
            alt=""
          />
          <span>￥1166</span>
        </div>
        <div class="Bannertoptwo">
          <img
            src="https://pic.cdfgsanya.com/assets/upload/product/38fd8c2415a928b0aa443b0f79f58086_400x400.jpg"
            alt=""
          />
          <span>￥929</span>
        </div>
      </div>
      <div class="Bannerbottom">
        <span>超值闪购 <span class="bnt">爆款5折起</span></span>
        <div class="Bannerbottomone">
          <img
            src="https://pic.cdfgsanya.com/assets/upload/product/bd24acc2be52228edba5a5408bb2df6b_400x400.jpg"
            alt=""
          />
          <span>￥1166</span>
        </div>
        <div class="Bannerbottomtwo">
          <img
            src="https://pic.cdfgsanya.com/assets/upload/product/38fd8c2415a928b0aa443b0f79f58086_400x400.jpg"
            alt=""
          />
          <span>￥929</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  data() {
    return {
      images: [
        "https://pic.cdfgsanya.com/assets/upload/visual/bd2a73fe58dc8af5f7fefebdbed9eb1f.jpg?1672714547379",
        "https://pic.cdfgsanya.com/assets/upload/visual/bad5f3a65d17c47b11fd87f9f2ca6eea.png?1675648624751",
        "https://pic.cdfgsanya.com/assets/upload/visual/bd2a73fe58dc8af5f7fefebdbed9eb1f.jpg?1672714547379",
        "https://pic.cdfgsanya.com/assets/upload/visual/3cce2ba6eb25d26adaf2eed871f8b21b.jpg?1675161798277",
      ],
    };
  },
};
</script>

<style scoped>
.Banner {
  display: flex;
  justify-content: space-evenly;
}
.Bannerone {
  width: 46%;
  height: 220px;
  /* background-color: pink; */
  border-radius: 10px;
}
.Bannerone > .Bannertop > span {
  width: 100%;
  font-size: 14px;
  background-image: linear-gradient(pink, white);
  border-radius: 10px 10px 0 0;
  padding-left: 10px;
}
.Bannertop {
  width: 100%;
  height: 48%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: white;
}
.Bannertopone {
  width: 50%;
  height: 100%;
  text-align: center;
  font-size: 12px;
}
.Bannertoptwo {
  width: 50%;
  height: 100%;
  text-align: center;
  font-size: 12px;
}
.Bannertopone > img {
  width: 80%;
}
.Bannertoptwo > img {
  width: 80%;
}
.Bannerbottom {
  width: 100%;
  height: 48%;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: white;
}
.Bannerbottom > span > .bnt {
  font-size: 12px;
  color: darkgoldenrod;
}
.Bannerone > .Bannerbottom > span {
  width: 100%;
  font-size: 14px;
  display: inline;
  background-image: linear-gradient(pink, white);
  /* background-color: rgba(255, 192, 203, 0.473); */
  border-radius: 10px 10px 0 0;
  padding-left: 10px;
}
.Bannerbottomone {
  width: 50%;
  height: 100%;
  text-align: center;
  font-size: 12px;
}
.Bannerbottomtwo {
  width: 50%;
  height: 100%;
  text-align: center;
  font-size: 12px;
}
.Bannerbottomone > img {
  width: 80%;
}
.Bannerbottomtwo > img {
  width: 80%;
}
</style>